<template>
	<view class="pages-box rel" v-if="detail.id">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="接单中" leftIcon="icon-left" color="#ffffff"
			:backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->

		<view class="mt-md fill-base pd-lg radius-16 ml-md mr-md ">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">上门类型</text>
				<text class="f-desc c-icontext">{{detail.order_type == 1 ? '上门服务' : '上门回收'}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">预约时间</text>
				<text class="f-desc c-icontext">{{$util.formatTime(detail.start_time*1000, 'YY-M-D h:m')}}</text>
			</view>
		</view>
		<view class="mt-md fill-base pd-lg radius-16 ml-md mr-md ">
			<!-- <view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">联系人姓名</text>
				<text class="f-desc c-icontext">{{detail.address_info.user_name}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">联系电话</text>
				<text class="f-desc c-icontext">{{detail.address_info.mobile}}</text>
			</view> -->
			<view class="pt-md pb-md flex">
				<text class="f-paragraph c-mini-title">地址</text>
				<view class="flex-1 flex addressContainer" style="justify-content: flex-end;">
					<text class="flex-1 f-sm-title c-warning max-500">{{detail.address_info.address}}</text>
					<view class="locationContainer" @click.stop="mapNavigaion(detail.address_info.address)">
						<image class="location" src="/static/images/location.png" mode="aspectFit"></image>
						<text :style="{color:primaryColor}">导航</text>
					</view>

				</view>
			</view>
		</view>
		<view class="mt-md fill-base pd-lg flex-between radius-16 ml-md mr-md"
			v-for="(item,index) in detail.order_goods" :key="index">
			<image :src="item.image" mode="aspectFill" class="radius-16 order-image"></image>
			<view class="flex-1 pl-md">
				<view class="f-title text-bold">{{item.name}}</view>
				<view class="f-caption c-caption pt-sm pb-sm">{{item.title}}</view>
				<view class=" c-warning f-paragraph">￥{{item.price}}</view>
			</view>
		</view>
		<view class="mt-md fill-base pd-lg radius-16 ml-md mr-md">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">订单编号</text>
				<view class="flex-center">
					<text class="f-desc c-icontext pr-sm">{{detail.order_code}}</text>
					<view class="flex-center f-icontext copy-btn pl-sm pr-sm"
						@tap="$util.goUrl({url: detail.order_code,openType: 'copy'})"
						:style="{color:primaryColor,border: `1px solid ${primaryColor}` }">复制</view>
				</view>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">下单时间</text>
				<text class="f-desc c-icontext">{{$util.formatTime(detail.create_time*1000, '')}}</text>
			</view>
			<view class="pt-md pb-md flex" v-if="detail.text">
				<text class="f-paragraph c-mini-title">订单备注</text>
				<view class="flex-1 flex" style="justify-content: flex-end;">
					<text class="f-desc c-icontext max-500 pre-wrap">{{detail.text}}</text>
				</view>
			</view>
		</view>
		<view class="mt-md fill-base pr-lg pl-lg pt-sm pb-sm radius-16 ml-md mr-md">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">支付方式</text>
				<text class="f-desc c-icontext">{{payModel[detail.pay_model]}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">上门费</text>
				<text class="f-desc c-warning">￥{{detail.door_money || 0}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">服务费</text>
				<text class="f-desc c-warning text-bold">¥{{detail.order_goods[0].price || 0}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">支付金额</text>
				<text
					class="f-desc c-warning text-bold">¥{{(detail.order_goods[0].price*1 + detail.door_money*1).toFixed(2)}}</text>
			</view>
		</view>

		<view class="space-max-footer"></view>
		<fixed position="bottom">
			<view class="fill-base pl-lg pr-lg b-1px-t">
				<view class="flex-y-center pt-md pb-md" style="justify-content: flex-end;">
					<view class="flex-center order-btn radius-10 f-desc c-base fill-warning"
						@tap.stop="refuseOrder(detail)" v-if="detail.coach_id">拒绝接单</view>
					<view class="radius-10 order-btn flex-center f-desc ml-md"
						v-if="[1,2].includes(coachInfo.identity) && coachInfo.company_id"
						@tap.stop="$util.goUrl({url: `/user/pages/pool/assign?id=${detail.id}&delta=2&s_type=${detail.s_type_id}`})"
						:style="{color: `#fff`, background: primaryColor}">指派</view>
					<view class="radius-10 order-btn flex-center f-desc ml-md"
						:style="{color: `#fff`, background: primaryColor}" @tap="orderChange">确认接单</view>
				</view>
				<view class="space-safe"></view>
			</view>
		</fixed>
		<!-- #ifdef APP-PLUS -->
		<openAuth type="phone" ref="app_check_item"></openAuth>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	import openAuth from "@/components/open-auth.vue"

	export default {
		components: {
			tabbar,
			openAuth
		},
		data() {
			return {
				detail: {},
				options: {},
				payModel: {
					1: '微信支付'
				},
				param: {
					id: '',
					status: 3, //2取消订单（已接单变成待接单状态） 3接单 4出发 5到达 6开始服务 7验证 8完成
				}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			coachInfo: state => state.user.coachInfo,
			location: state => state.user.location,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			this.param.id = options.id
			this.options = options
			this.initIndex()
		},
		methods: {
			...mapActions(['getConfigInfo', 'getCoachInfo']),
			...mapMutations(['updatePoolItem', 'updateHomeItem']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					this.getConfigInfo()
				}
				if (!this.coachInfo.id || refresh) {
					await this.getCoachInfo()
				}
				this.getDetail()
			},
			async getDetail() {
				this.detail = await this.$api.order.orderInfo(this.options)
				console.log(this.detail)
				this.$util.hideAll()
			},
			async orderChange() {
				if (this.location.address.indexOf(this.coachInfo.city) == -1) {
					this.$util.showToast({
						title: '不能跨市接单'
					})
					return
				}
				if (!this.coachInfo.id_code) {
					let [res_del, {
						confirm
					}] = await uni.showModal({
						content: `请补全信息且审核通过再接单`,
					})
					if (confirm) {
						this.$util.goUrl({
							url: `/user/pages/service-apply`
						})
						return
					}
					if (!confirm) return;
				}

				uni.showModal({
					title: '提示',
					content: '是否确认接单',
					success: async function(res) {
						if (res.confirm) {
							this.$util.showLoading()
							await this.$api.order.updateOrder(this.param)
							this.$util.hideAll()
							this.$util.showToast({
								title: '接单成功'
							})
							this.updateHomeItem({
								key: 'pageActive',
								val: false
							})
							setTimeout(() => {
								this.$util.back()
								this.$util.goUrl({
									url: 1,
									openType: 'navigateBack'
								})
							}, 1500)
						}
					},
				})


			},
			refuseOrder(item) {
				uni.showModal({
					title: '提示',
					content: '是否拒绝接单',
					success: function(res) {
						if (res.confirm) {
							this.callPhone(this.coachInfo.service_tel)
							// this.$util.goUrl({openType: 'call', url: this.coachInfo.service_tel})
						}
					}
				})

			},
			async callPhone(url) {
				// #ifdef APP-PLUS
				let [, data] = await uni.getSystemInfo()
				if (data.platform !== 'ios') {
					this.$util.isCheckAuth({
						type: 'phone'
					}).then(res => {
						if (res) {
							this.$refs.app_check_item.open()
						}
					})
				}
				// #endif
				uni.makePhoneCall({
					phoneNumber: url,
					success: (res) => {
						// #ifdef APP-PLUS
						this.$refs.app_check_item.close()
						// #endif
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						this.$refs.app_check_item.close()
						// #endif
					}
				})

			},
			mapNavigaion(address) {

				this.$util.encodeAddress(address).then(data => {
					this.$util.mapNavigation(data.latitude, data.longitude, address)
				})
			},
		},
	}
</script>


<style lang="scss">
	.pages-box {
		.order-image {
			width: 160rpx;
			height: 160rpx;
		}

		.order-btn {
			width: 152rpx;
			height: 62rpx;
		}

		.copy-btn {
			border-radius: 2px;
		}
	}

	.addressContainer {
		margin-left: 20px;

		.locationContainer {
			margin-right: 0px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.location {
				width: 30px;
				height: 30px;
			}
		}
	}
</style>